<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>绩效考核管理系统</title>
    <meta name="description" content="绩效考核管理系统">
    <meta name="keywords" content="绩效考核管理系统">
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <!-- 引入组件库 -->
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../plugins/elementui/index.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
</head>
<body class="hold-transition">
    <div id="app">
        <div class="content-header">
            <h1>团队工作上报管理<small>团队工作上报</small></h1>
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
                <el-breadcrumb-item>团队工作</el-breadcrumb-item>
                <el-breadcrumb-item><span style="font-weight: bolder">待提交</span></el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="app-container">
            <div class="box">
                <p align="center" style="font-size: larger;font-weight: normal;color: #3c8dbc">团队待提交报表</p>
                <!--表格-->
                <el-row>
                    <el-button type="danger" @click="deleteMany()" plain>批量删除</el-button>
                </el-row>
                <template>
                    <el-table
                            :data="tableData"
                            ref="multipleTable"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            @selection-change="handleSelectionChange">
                        <el-table-column
                                type="selection"
                                label="全选"
                                width="55">
                        </el-table-column>
                        <el-table-column
                                type="index"
                                label="序号"
                                width="50">
                        </el-table-column>
                        <el-table-column
                                prop="formTitle"
                                label="活动名称"
                                align="center"
                                width="150px">
                        </el-table-column>
                        <el-table-column
                                prop="formNumber"
                                label="报表编号"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                prop="workDate"
                                label="工作日期"
                                align="center"
                                width="90px">
                        </el-table-column>
                        <el-table-column
                                prop="saveDate"
                                label="填报日期"
                                align="center">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                align="center">
                            <template  slot-scope="scope">
                                <el-row>
                                    <el-button type="primary" size="small" @click="editForm(scope.$index)">编辑</el-button>
                                    <el-button type="success" size="small" @click="submitForm(scope.$index)">提交</el-button>
                                    <el-button type="danger" size="small" @click="deleteForm(scope.$index)">删除</el-button>
                                </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <!--修改报表工作项弹框-->
                <el-dialog
                        title="修改报表工作项"
                        :visible.sync="dialogVisibleUpdateItem"
                        width="80%"
                        center="true">
                    <div style="font-family: 华文楷体" v-if="flag==true">
                        模式：<span style="color: #0000ff">模板复制</span>
                        &nbsp;<span></span>
                        &nbsp;<span></span>
                        &nbsp;<span></span>
                        &nbsp;
                        填报人：<span style="color: #0000ff">{{username}}</span>
                    </div>
                    <div style="font-family: 华文楷体" v-if="flag==false">
                        模式：<span style="color: #0000ff">按人填报</span>
                        &nbsp;<span></span>
                        &nbsp;<span></span>
                        &nbsp;<span></span>
                        &nbsp;
                        填报人：<span style="color: #0000ff">{{username}}</span>
                    </div>
                    <div style="font-family: 华文楷体">
                        <span>成员：</span>
                        <span v-for="(username,index) in usernames" style="margin-right: 10px;color: #0000ff">
                        {{username.username}}
                        <span v-if="index!==(usernames.length-1)">、</span>
                        </span>
                    </div>
                    <template>
                        <el-table
                                :data="updateTableData"
                                ref="updateMultipleTable"
                                style="width: 100%"
                                :row-class-name="tableRowClassName"
                                @selection-change="updateHandleSelectionChange">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="50">
                            </el-table-column>
                            <el-table-column
                                    prop="item"
                                    label="工作项"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="grade"
                                    label="单项分值"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="数量"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input
                                            placeholder="请输入本工作项的数量"
                                            v-model="input[scope.$index]"
                                            clearable v-on:blur="updateCalCount(scope.$index)">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="count"
                                    label="小计"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="备注"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-input
                                            placeholder="请输入备注"
                                            v-model="remarks[scope.$index]"
                                            clearable v-on:blur="onBlurRemark(scope.$index)">
                                    </el-input>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="username"
                                    label="所属成员"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    label="操作"
                                    align="center">
                                <template  slot-scope="scope">
                                    <el-row>
                                        <el-button type="danger" size="small" @click="deleteItem(scope.$index)">删除</el-button>
                                    </el-row>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!--按钮-->
                        <div style="margin-top: 10px" align="center">
                            <el-row>
                                <el-button style="margin-right: 30px" type="success" @click="saveItems()" plain>保存修改</el-button>
                                <el-button style="margin-right: 30px" type="primary" @click="abandonUpdate()" plain>放弃修改</el-button>
                            </el-row>
                        </div>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</body>
<script>
    var vue = new Vue({
        el: '#app',
        data:function () {
            return {
                <!--勾选多选框-->
                multipleSelection:[],
                <!--表格相关数据-->
                tableData:[],
                <!--修改报表工作项信息弹框-->
                dialogVisibleUpdateItem:false,
                input:[],
                remarks:[],
                formIndex:'',
                usernames:[],
                username:'',
                flag:true,
            };
        },
        created() {
            this.findAll();
        },
        methods: {
            //设置多选框为选中状态
            toggleSelection(rows) {
                if (rows) {
                    rows.forEach(row => {
                        this.$refs.multipleTable.toggleRowSelection(row);
                    });
                } else {
                    this.$refs.multipleTable.clearSelection();
                }
            },
            <!--勾选多选框-->
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            <!--批量删除-->
            deleteMany(){
                //使用确认删除弹框
                this.$confirm('此操作将永久删除这些报表信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then((resp) => {
                    console.log(this.multipleSelection);
                    //点击确认删除则执行本代码逻
                    let formNumbers1=[];
                    let formNumbers2=[];
                    let j = 0;
                    let k = 0;
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        if(this.multipleSelection[i].saveItems[0].username!=null){
                            formNumbers2[j++] = this.multipleSelection[i].formNumber;
                        }else{
                            formNumbers1[k++] = this.multipleSelection[i].formNumber;
                        }
                    }
                    if (formNumbers1.length > 0){
                        axios.post("/kpi_assess/teamSaveForms/deleteMany",formNumbers1).then((resp)=>{
                            if (resp.data.data) {
                                this.$message({
                                    type: 'success',
                                    message: '批量删除报表成功！'
                                });
                                this.findAll();
                            }else{
                                this.$message.error("批量删除报表失败！");
                            }
                        })
                    }
                    if(formNumbers2.length > 0){
                        axios.post("/kpi_assess/teamSaveForms2/deleteMany",formNumbers2).then((resp)=>{
                            if (resp.data.data) {
                                this.$message({
                                    type: 'success',
                                    message: '批量删除报表成功！'
                                });
                                this.findAll();
                            }else{
                                this.$message.error("批量删除报表失败！");
                            }
                        })
                    }
                }).catch(() => {
                    //点击取消删除执行本代码逻辑
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            <!--查询当前用户的所有待提交报表信息-->
            findAll(){
                let idCardNumber = "440882199412204773";
                //查询“模板复制模式”的团队报表
                axios.get("/kpi_assess/teamSaveForms/" + idCardNumber).then((resp)=>{
                    this.tableData = resp.data.data;
                    //查询“按人填报模式”的团队报表
                    axios.get("/kpi_assess/teamSaveForms2/" + idCardNumber).then((response)=>{
                        console.log(response.data.data);
                        for (let i = 0; i < response.data.data.length; i++) {
                            this.tableData.push(response.data.data[i]);
                        }
                        for (let i = 0; i < this.tableData.length; i++) {
                            this.tableData[i].saveDate = new Date(this.tableData[i].saveDate).toLocaleString();
                            this.tableData[i].workDate = new Date(this.tableData[i].workDate).toLocaleDateString();
                        }
                        console.log(this.tableData);
                    });
                });

            },
            <!--删除某一个报表-->
            deleteForm(index){
                //首先判断是“模板复制”还是“按人填报”模式
                let model = true;
                if (this.tableData[index].saveItems[0].username!=null){
                    //按人填报模式
                    model = false;
                }
                let formNumber = this.tableData[index].formNumber;
                if (model){
                    //“模板复制”模式
                    axios.delete("/kpi_assess/teamSaveForms/"+formNumber).then((resp)=>{
                        if (resp.data.data){
                            this.$message({
                                type:'success',
                                message:'删除报表成功！'
                            });
                            this.findAll();
                        }else{
                            this.$message.error("删除报表失败！");
                        }
                    });
                }else{
                    //“按人填报”模式
                    axios.delete("/kpi_assess/teamSaveForms2/"+formNumber).then((resp)=>{
                        if (resp.data.data){
                            this.$message({
                                type:'success',
                                message:'删除报表成功！'
                            });
                            this.findAll();
                        }else{
                            this.$message.error("删除报表失败！");
                        }
                    });
                }

            },
            <!--编辑报表-->
            editForm(index){
                this.formIndex = index;
                this.dialogVisibleUpdateItem=true;
                this.updateTableData = this.tableData[index].saveItems;
                this.usernames = this.tableData[index].usernames;
                this.username = this.tableData[index].username;
                for (let i = 0; i < this.updateTableData.length; i++) {
                    this.input[i] = this.updateTableData[i].number;
                    this.remarks[i] = this.updateTableData[i].remark;
                }
                //将当前编辑的表单是“模板复制”还是“按人填报”绑定到flag变量中
                //如果this.flag=true ==> 模板复制
                //如果this.flag=false ==> 按人填报
                if (this.updateTableData[0].username!=null){
                    this.flag=false;
                }else{
                    this.flag=true;
                }
            },
            <!--编辑报表：计算分值(输入框失去焦点触发)-->
            updateCalCount(index){
                this.updateTableData[index].count = parseFloat((this.updateTableData[index].grade * this.input[index]).toFixed(4));
                this.updateTableData[index].number = this.input[index] - 0;
            },
            onBlurRemark(index){
                this.updateTableData[index].remark = this.remarks[index];
            },
            <!--编辑报表：删除指定工作项-->
            deleteItem(index){
                if (this.updateTableData.length===1){
                    //使用确认删除弹框
                    this.$confirm('此报表只剩一个工作项，删除该工作项将也删除该报表, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确认删除则执行本代码逻辑

                        //将当前编辑的表单是“模板复制”还是“按人填报”绑定到flag变量中
                        //如果this.flag=true ==> 模板复制
                        //如果this.flag=false ==> 按人填报
                        if (this.flag){
                            //模板复制模式
                            axios.delete("/kpi_assess/teamSaveItems/" + this.updateTableData[index].id).then((resp)=>{
                                if (resp.data.data){
                                    this.$message({
                                        message:'删除工作项成功',
                                        type:'success'
                                    });
                                    //如果把报表的工作项删除完了，那么也就要删除该报表、
                                    this.deleteForm(this.formIndex);
                                }else{
                                    this.$message.error("删除工作项失败")
                                };
                            });
                        }else{
                            //"按人填报"模式
                            axios.delete("/kpi_assess/teamSaveItems2/" + this.updateTableData[index].id).then((resp)=>{
                                if (resp.data.data){
                                    this.$message({
                                        message:'删除工作项成功',
                                        type:'success'
                                    });
                                    //如果把报表的工作项删除完了，那么也就要删除该报表、
                                    this.deleteForm(this.formIndex);
                                }else{
                                    this.$message.error("删除工作项失败")
                                };
                            });
                        }
                    }).catch(() => {
                        //点击取消删除执行本代码逻辑
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    }).finally(()=>{
                        this.dialogVisibleUpdateItem=false;
                        this.findAll();
                    });
                }else{
                    //使用确认删除弹框
                    this.$confirm('此操作将永久删除本工作项数据, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        //点击确认删除则执行本代码逻辑
                        if(this.flag){
                            //“模板复制”模式
                            axios.delete("/kpi_assess/teamSaveItems/" + this.updateTableData[index].id).then((resp)=>{
                                if (resp.data.data){
                                    this.$message({
                                        message:'删除工作项成功',
                                        type:'success'
                                    });
                                    this.updateTableData.splice(index,1);
                                    for (let i=0;i < this.updateTableData.length;i++){
                                        this.updateTableData[i].index = i;
                                    }
                                    //删除工作项数据的同时也删除input输入框的内容
                                    for (let i=index+1;i<this.input.length;i++){
                                        this.input[i-1] =this.input[i];
                                    }
                                    this.input.splice(this.input.length-1,1);
                                    for (let i=index+1;i<this.remarks.length;i++){
                                        this.remarks[i-1] =this.remarks[i];
                                    }
                                    this.input.splice(this.remarks.length-1,1);
                                }else{
                                    this.$message.error("删除工作项失败！");
                                };
                            });
                        }else{
                            axios.delete("/kpi_assess/teamSaveItems2/" + this.updateTableData[index].id).then((resp)=>{
                                if (resp.data.data){
                                    this.$message({
                                        message:'删除工作项成功',
                                        type:'success'
                                    });
                                    this.updateTableData.splice(index,1);
                                    for (let i=0;i < this.updateTableData.length;i++){
                                        this.updateTableData[i].index = i;
                                    }
                                    //删除工作项数据的同时也删除input输入框的内容
                                    for (let i=index+1;i<this.input.length;i++){
                                        this.input[i-1] =this.input[i];
                                    }
                                    this.input.splice(this.input.length-1,1);
                                    for (let i=index+1;i<this.remarks.length;i++){
                                        this.remarks[i-1] =this.remarks[i];
                                    }
                                    this.input.splice(this.remarks.length-1,1);
                                }else{
                                    this.$message.error("删除工作项失败！");
                                };
                            });
                        }

                    }).catch(() => {
                        //点击取消删除执行本代码逻辑
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    }).finally(()=>{
                        this.findAll();
                    });
                }
            },
            <!--编辑报表：放弃修改-->
            abandonUpdate(){
                this.dialogVisibleUpdateItem=false;
                this.findAll();
            },
            <!--编辑报表：保存修改后的报表信息-->
            saveItems(){
                let teamSaveItems = this.updateTableData;
                if(this.flag){
                    //“模板复制”模式
                    axios.put("/kpi_assess/teamSaveItems",teamSaveItems).then((resp)=>{
                        if (resp.data.data){
                            this.$message({
                                type:'success',
                                message:resp.data.msg
                            });
                            this.dialogVisibleUpdateItem=false;
                        }else{
                            this.$message.error(resp.data.msg);
                        }
                    });
                }else{
                    //“按人填报”模式
                    axios.put("/kpi_assess/teamSaveItems2",teamSaveItems).then((resp)=>{
                        if (resp.data.data){
                            this.$message({
                                type:'success',
                                message:resp.data.msg
                            });
                            this.dialogVisibleUpdateItem=false;
                        }else{
                            this.$message.error(resp.data.msg);
                        }
                    });
                }
            },
            // //创建请求参数空骨架，与后端的TeamSubmitItem实体类保持一致
            // recursiveAssignmentTeamSubmitItem(listData){
            //     let list = [];
            //     for (let i = 0; i < listData.length; i++) {
            //         let map = {
            //             idCardNumber:listData[i].idCardNumber,
            //             username:listData[i].username,
            //             item:listData[i].item,
            //             grade:,
            //             count:'',
            //             number: '',
            //             remark:'',
            //         };
            //         list.push(map);
            //     }
            //     return list;
            // },

            <!--提交报表-->
            submitForm(index){
                let listData = this.tableData[index];
                // //将字符串日期转化为Date类型：
                let workDate = listData.workDate;
                workDate = workDate.replace(/-/g,"/");
                listData.workDate = new Date(workDate);
                let submitItems = listData.saveItems;
                let submitDate = new Date();
                let teamSubmitForm = {
                    'idCardNumber': listData.idCardNumber,
                    'username': listData.username,
                    'formTitle': listData.formTitle,
                    'workDate':listData.workDate,
                    'submitDate':submitDate,
                    'submitItems':submitItems,
                    'members':listData.usernames,
                };
                axios.post("/kpi_assess/teamSubmitForms",teamSubmitForm).then((resp)=>{
                    if (resp.data.data){
                        this.deleteForm(index);
                        this.$message({
                            type:'success',
                            message:resp.data.msg
                        });
                        //提交表单之后，跳转到待确认：
                        window.location.href="wait_certain.html";
                    }else{
                        this.$message.error(resp.data.msg);
                    }
                })
            }
        }
    })
</script>
</html>